﻿<html>
	<head>
		<title>ListBox - jQuery LigerUI API</title>     
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		<link href="../common.css" rel="stylesheet" type="text/css" />
		<script src="../core.js" type="text/javascript"></script> 
	</head>
	<body>
		<h2>ligerListBox</h2> 
         
        
                    <p> 
            列表框组件
        </p>
                     
          
                <h3>示例</h3>
        <pre><div><!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--><span style="color: #008080;"> 1</span> <span style="color: #000000;">  </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">script </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text/javascript&quot;</span><span style="color: #0000FF;">&gt;</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 2</span> <span style="background-color: #F5F5F5; color: #000000;">        $(</span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> ()
</span><span style="color: #008080;"> 3</span> <span style="background-color: #F5F5F5; color: #000000;">        { 
</span><span style="color: #008080;"> 4</span> <span style="background-color: #F5F5F5; color: #000000;">            $(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">#listbox1,#listbox2</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).ligerListBox({
</span><span style="color: #008080;"> 5</span> <span style="background-color: #F5F5F5; color: #000000;">                isShowCheckBox: </span><span style="background-color: #F5F5F5; color: #0000FF;">true</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;"> 6</span> <span style="background-color: #F5F5F5; color: #000000;">                isMultiSelect: </span><span style="background-color: #F5F5F5; color: #0000FF;">true</span><span style="background-color: #F5F5F5; color: #000000;">,
</span><span style="color: #008080;"> 7</span> <span style="background-color: #F5F5F5; color: #000000;">                height: </span><span style="background-color: #F5F5F5; color: #000000;">140</span><span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;"> 8</span> <span style="background-color: #F5F5F5; color: #000000;">            });
</span><span style="color: #008080;"> 9</span> <span style="background-color: #F5F5F5; color: #000000;">
</span><span style="color: #008080;">10</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> data </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> [
</span><span style="color: #008080;">11</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">张三</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">1</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">12</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">李四</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">2</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">13</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">赵武2</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">3</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">14</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">赵武3</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">4</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">15</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">赵武4</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">5</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">16</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">赵武5</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">6</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">17</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">赵武6</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">7</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> },
</span><span style="color: #008080;">18</span> <span style="background-color: #F5F5F5; color: #000000;">                    { text: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">赵武7</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">, id: </span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;">8</span><span style="background-color: #F5F5F5; color: #000000;">'</span><span style="background-color: #F5F5F5; color: #000000;"> }
</span><span style="color: #008080;">19</span> <span style="background-color: #F5F5F5; color: #000000;">            ];
</span><span style="color: #008080;">20</span> <span style="background-color: #F5F5F5; color: #000000;">            liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox1</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">).setData(data);
</span><span style="color: #008080;">21</span> <span style="background-color: #F5F5F5; color: #000000;">        });
</span><span style="color: #008080;">22</span> <span style="background-color: #F5F5F5; color: #000000;">        </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> moveToLeft()
</span><span style="color: #008080;">23</span> <span style="background-color: #F5F5F5; color: #000000;">        {
</span><span style="color: #008080;">24</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> box1 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox1</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">), box2 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox2</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;">25</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> selecteds </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> box2.getSelectedItems();
</span><span style="color: #008080;">26</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">if</span><span style="background-color: #F5F5F5; color: #000000;"> (</span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds </span><span style="background-color: #F5F5F5; color: #000000;">||</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds.length) </span><span style="background-color: #F5F5F5; color: #0000FF;">return</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;">27</span> <span style="background-color: #F5F5F5; color: #000000;">            box2.removeItems(selecteds);
</span><span style="color: #008080;">28</span> <span style="background-color: #F5F5F5; color: #000000;">            box1.addItems(selecteds);
</span><span style="color: #008080;">29</span> <span style="background-color: #F5F5F5; color: #000000;">        }
</span><span style="color: #008080;">30</span> <span style="background-color: #F5F5F5; color: #000000;">        </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> moveToRight()
</span><span style="color: #008080;">31</span> <span style="background-color: #F5F5F5; color: #000000;">        {
</span><span style="color: #008080;">32</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> box1 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox1</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">), box2 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox2</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;">33</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> selecteds </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> box1.getSelectedItems();
</span><span style="color: #008080;">34</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">if</span><span style="background-color: #F5F5F5; color: #000000;"> (</span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds </span><span style="background-color: #F5F5F5; color: #000000;">||</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds.length) </span><span style="background-color: #F5F5F5; color: #0000FF;">return</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;">35</span> <span style="background-color: #F5F5F5; color: #000000;">            box1.removeItems(selecteds);
</span><span style="color: #008080;">36</span> <span style="background-color: #F5F5F5; color: #000000;">            box2.addItems(selecteds);
</span><span style="color: #008080;">37</span> <span style="background-color: #F5F5F5; color: #000000;">        }
</span><span style="color: #008080;">38</span> <span style="background-color: #F5F5F5; color: #000000;">        </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> moveAllToLeft()
</span><span style="color: #008080;">39</span> <span style="background-color: #F5F5F5; color: #000000;">        { 
</span><span style="color: #008080;">40</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> box1 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox1</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">), box2 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox2</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;">41</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> selecteds </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> box2.data;
</span><span style="color: #008080;">42</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">if</span><span style="background-color: #F5F5F5; color: #000000;"> (</span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds </span><span style="background-color: #F5F5F5; color: #000000;">||</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds.length) </span><span style="background-color: #F5F5F5; color: #0000FF;">return</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;">43</span> <span style="background-color: #F5F5F5; color: #000000;">            box1.addItems(selecteds);
</span><span style="color: #008080;">44</span> <span style="background-color: #F5F5F5; color: #000000;">            box2.removeItems(selecteds); 
</span><span style="color: #008080;">45</span> <span style="background-color: #F5F5F5; color: #000000;">        }
</span><span style="color: #008080;">46</span> <span style="background-color: #F5F5F5; color: #000000;">        </span><span style="background-color: #F5F5F5; color: #0000FF;">function</span><span style="background-color: #F5F5F5; color: #000000;"> moveAllToRight()
</span><span style="color: #008080;">47</span> <span style="background-color: #F5F5F5; color: #000000;">        { 
</span><span style="color: #008080;">48</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> box1 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox1</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">), box2 </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> liger.get(</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">listbox2</span><span style="background-color: #F5F5F5; color: #000000;">&quot;</span><span style="background-color: #F5F5F5; color: #000000;">);
</span><span style="color: #008080;">49</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">var</span><span style="background-color: #F5F5F5; color: #000000;"> selecteds </span><span style="background-color: #F5F5F5; color: #000000;">=</span><span style="background-color: #F5F5F5; color: #000000;"> box1.data;
</span><span style="color: #008080;">50</span> <span style="background-color: #F5F5F5; color: #000000;">            </span><span style="background-color: #F5F5F5; color: #0000FF;">if</span><span style="background-color: #F5F5F5; color: #000000;"> (</span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds </span><span style="background-color: #F5F5F5; color: #000000;">||</span><span style="background-color: #F5F5F5; color: #000000;"> </span><span style="background-color: #F5F5F5; color: #000000;">!</span><span style="background-color: #F5F5F5; color: #000000;">selecteds.length) </span><span style="background-color: #F5F5F5; color: #0000FF;">return</span><span style="background-color: #F5F5F5; color: #000000;">;
</span><span style="color: #008080;">51</span> <span style="background-color: #F5F5F5; color: #000000;">            box2.addItems(selecteds);
</span><span style="color: #008080;">52</span> <span style="background-color: #F5F5F5; color: #000000;">            box1.removeItems(selecteds);
</span><span style="color: #008080;">53</span> <span style="background-color: #F5F5F5; color: #000000;">           
</span><span style="color: #008080;">54</span> <span style="background-color: #F5F5F5; color: #000000;">        }
</span><span style="color: #008080;">55</span> <span style="background-color: #F5F5F5; color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">56</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">style </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;text/css&quot;</span><span style="color: #0000FF;">&gt;</span><span style="background-color: #F5F5F5; color: #800000;">
</span><span style="color: #008080;">57</span> <span style="background-color: #F5F5F5; color: #800000;">        .middle input </span><span style="background-color: #F5F5F5; color: #000000;">{</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;">58</span> <span style="background-color: #F5F5F5; color: #FF0000;">            display</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;"> block</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">width</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;">30px</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;"> margin</span><span style="background-color: #F5F5F5; color: #000000;">:</span><span style="background-color: #F5F5F5; color: #0000FF;">2px</span><span style="background-color: #F5F5F5; color: #000000;">;</span><span style="background-color: #F5F5F5; color: #FF0000;">
</span><span style="color: #008080;">59</span> <span style="background-color: #F5F5F5; color: #FF0000;">        </span><span style="background-color: #F5F5F5; color: #000000;">}</span><span style="background-color: #F5F5F5; color: #800000;">
</span><span style="color: #008080;">60</span> <span style="background-color: #F5F5F5; color: #800000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">style</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">61</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">head</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">62</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">body </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;padding:10px&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;"> 
</span><span style="color: #008080;">63</span> <span style="color: #000000;">     </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;margin:4px;float:left;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">64</span> <span style="color: #000000;">         </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;listbox1&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">  
</span><span style="color: #008080;">65</span> <span style="color: #000000;">     </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">66</span> <span style="color: #000000;">     </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;margin:4px;float:left;&quot;</span><span style="color: #FF0000;"> class</span><span style="color: #0000FF;">=&quot;middle&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">67</span> <span style="color: #000000;">         </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;button&quot;</span><span style="color: #FF0000;"> onclick</span><span style="color: #0000FF;">=&quot;moveToLeft()&quot;</span><span style="color: #FF0000;"> value</span><span style="color: #0000FF;">=&quot;&lt;&quot;</span><span style="color: #FF0000;"> </span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">68</span> <span style="color: #000000;">          </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;button&quot;</span><span style="color: #FF0000;"> onclick</span><span style="color: #0000FF;">=&quot;moveToRight()&quot;</span><span style="color: #FF0000;"> value</span><span style="color: #0000FF;">=&quot;&gt;&quot;</span><span style="color: #FF0000;"> </span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">69</span> <span style="color: #000000;">          </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;button&quot;</span><span style="color: #FF0000;"> onclick</span><span style="color: #0000FF;">=&quot;moveAllToLeft()&quot;</span><span style="color: #FF0000;"> value</span><span style="color: #0000FF;">=&quot;&lt;&lt;&quot;</span><span style="color: #FF0000;"> </span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">70</span> <span style="color: #000000;">         </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">input </span><span style="color: #FF0000;">type</span><span style="color: #0000FF;">=&quot;button&quot;</span><span style="color: #FF0000;"> onclick</span><span style="color: #0000FF;">=&quot;moveAllToRight()&quot;</span><span style="color: #FF0000;"> value</span><span style="color: #0000FF;">=&quot;&gt;&gt;&quot;</span><span style="color: #FF0000;"> </span><span style="color: #0000FF;">/&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">71</span> <span style="color: #000000;">     </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">72</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">style</span><span style="color: #0000FF;">=&quot;margin:4px;float:left;&quot;</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">73</span> <span style="color: #000000;">        </span><span style="color: #0000FF;">&lt;</span><span style="color: #800000;">div </span><span style="color: #FF0000;">id</span><span style="color: #0000FF;">=&quot;listbox2&quot;</span><span style="color: #0000FF;">&gt;&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;"> 
</span><span style="color: #008080;">74</span> <span style="color: #000000;">    </span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000FF;">&gt;</span><span style="color: #000000;">
</span><span style="color: #008080;">75</span> <span style="color: #000000;"></span><span style="color: #0000FF;">&lt;/</span><span style="color: #800000;">body</span><span style="color: #0000FF;">&gt;</span></div></pre>
        
        <h3>截图</h3>

        <p>
            <img src="../../uishow/ligerListBox.jpg" />
        </p>  
        

			</body>
</html>